<template>
  <div class="components-title" :class="'skin-' + $root.skin">
    <div class="name">{{ title }}</div>
    <div class="right" :class="timePosition">
      <div v-if="time" class="time">{{ formateTime }}</div>
      <div v-if="dw" class="dw">{{ dw }}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String || Number,
      default: ""
    },
    time: {
      type: String || Number,
      default: ""
    },
    timePosition: {
      type: String,
      default: "bottom"
    },
    dw: {
      type: String || Number,
      default: ""
    },
    text: {
      type: String || Number,
      default: "截至"
    }
  },
  data() {
    return {
      formateTime: null
    };
  },
  created() {
    if (this.time) {
      let date = new Date();
      let [year, month, day] = ["", "", ""];
      if (this.time === "1") {
        let date = new Date();
        // 当天日期
        year = date.getFullYear();
        month = date.getMonth() + 1;
        day = date.getDate();
      } else if (this.time === "2") {
        // 当天日期的前一天
        let date = new Date(new Date() - 24 * 60 * 60 * 1000);
        year = date.getFullYear();
        month = date.getMonth() + 1;
        day = date.getDate();
      } else if (this.time === "3") {
        // 去年最后一天
        var startTime = new Date(new Date().getFullYear(), 0, 1);
        let date = new Date(startTime.getTime() - 24 * 60 * 60 * 1000);
        year = date.getFullYear();
        month = date.getMonth() + 1;
        day = date.getDate();
      } else if (this.time === "4") {
        // 本年上个月最后一天
        var startTime = new Date(new Date().getFullYear(), new Date().getMonth(), 1);
        let date = new Date(startTime.getTime() - 24 * 60 * 60 * 1000);
        year = date.getFullYear();
        month = date.getMonth() + 1;
        day = date.getDate();
      }
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      this.formateTime = `${this.text}${year}年${month}月${day}日`;
    }
  }
};
</script>
<style lang="scss" scoped>
.components-title {
  &.skin-1 {
    background-image: url("~@/assets/images/skin/1-echart-title.png");
  }

  &.skin-2 {
    background-image: url("~@/assets/images/skin/2-echart-title.png");
  }

  background-repeat: no-repeat;
  background-position: 0 0;
  height: 54px;
  line-height: 54px;
  background-size: 448px 54px;
  font-size: 24px;
  color: #fff;
  display: flex;
  justify-content: space-between;

  .name {
    margin-left: 80px;
  }

  .right {
    display: flex;
    margin-right: 12px;

    &.left {
      align-items: center;

      .time {
        margin-right: 8px;
      }
    }

    &.bottom {
      flex-direction: column;
      justify-content: space-evenly;
    }
  }

  .time {
    height: 24px;
    line-height: 22px;
    border: 1px solid rgba(74, 243, 249, 0.47);
    padding: 0 12px;
    font-size: 14px;
    color: #00f2f8;
    border-radius: 10px;
  }

  .dw {
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    color: #b3d3e5;
  }
}
</style>
